<template>
  <div id="app">
    <!-- <span class="icon-left"></span> -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
// 设置
// rem 是css3 新增的一个相对长度单位
// rem 的值相当于根元素 font-size 值的倍数
// 1 rem = 根元素 font-size
// 2 rem = 根元素 font-size * 2

// 这里选择在 DOM 加载完毕, 也就是 DOMContentLoaded事件中
// 动态设置根元素的font-size
// 下面选择屏幕尺寸的 十分之一 来作为 font-size 的值
// 这样做的好处是随着屏幕宽度的变化, rem 的值也会变化
// 个人觉得 生命周期也可以做这些事
document.addEventListener('DOMContentLoaded', () => {
  // 找到根元素
  const html = document.querySelector('html')

  // 设置 根元素的 font-size 为屏幕宽度的 十分之一
  let fontSize = window.innerWidth / 10;

  // 给 font-size 一个上限值
  fontSize = fontSize > 50 ? 50 : fontSize;

  html.style.fontSize = fontSize + 'px'
})
</script>

<style>

</style>
